<template>
	<view>
		<nav-header bgColor="bg-custom-color">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">个人中心</block>
		</nav-header>

		<view class="top bg-cyan">
			<view class="top-img-view">
				<view class="cu-avatar xl round" style="float: left;" :style="'background-image:url('+user_logo+');background-color: #121e2e;'"></view>
				<view class="userInfo">
					<view class="user-name">{{userInfo.realName}}<text v-if="userInfo && userInfo.map.userLevelName" style="color: rgb(237, 180, 59);font-size: 12px;">({{userInfo.map.userLevelName}})</text></view>
					<view class="user-name" style="padding-top: 0px;">{{userInfo.mobile}}</view>

				</view>
			</view>
		</view>

		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item arrow" @click="$common.toPage('../home/qrCode')">
				<view class="content">
					<text class="cuIcon-share text-grey"></text>
					<text class="text-grey">{{$t('my.friendsShare')}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="$common.toPage('../order/record')">
				<view class="content">
					<text class="cuIcon-calendar text-grey"></text>
					<text class="text-grey">{{$t('my.myOrder')}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="$common.toPage('../home/team')">
				<view class="content">
					<text class="cuIcon-friendfill text-grey"></text>
					<text class="text-grey">{{$t('my.myTeam')}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="$common.toPage('../record/record')">
				<view class="content">
					<text class="cuIcon-calendar text-grey"></text>
					<text class="text-grey">{{$t('my.gainRecording')}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="$common.toPage('../home/bind_usdt')">
				<view class="content">
					<text class="cuIcon-calendar text-grey"></text>
					<text class="text-grey">{{$t('my.USDTAddressBinding')}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="$common.toPage('../safetyCenter/safetyCenter')">
				<view class="content">
					<text class="lg text-gray cuIcon-lock text-grey"></text>
					<text class="text-grey">{{$t('my.setPassword')}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="modalName = 'RadioModal'">
				<view class="content">
					<text class="cuIcon-font text-grey"></text>
					<text class="text-grey">{{$t('my.languageSwitching')}}</text>
				</view>
			</view>
		</view>

		<view class="padding flex flex-direction back" style="margin-bottom: 60px;">
			<button class="cu-btn bg-et margin-tb-sm lg" @click="back">{{$t('loginout')}}</button>
		</view>

		<view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" >
				<radio-group class="block">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in language" :key="index" @tap="chooseLanguage(item)">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub text-grey">{{item.name}}</view>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>

		<nav-bottom showIndex='4'></nav-bottom>
	</view>
</template>

<script>
	var t
	export default {
		data() {
			return {
				userInfo: {},
				userId: '',
				user_logo: '/static/logo.png',
				modalName: null,
				language: [{
						name: '简体中文',
						value: 'zh-CN'
					},
					{
						name: 'English',
						value: 'en-US'
					}
				]
			};
		},
		onLoad() {
			t = this;
			// this.$i18n.locale = t.$common.localRead("local")
			t.userInfo = $common.getUser()
			if (!t.userInfo) {
				$common.notLoginUser()
			}
			this.getData();
		},
		methods: {
			chooseLanguage: function(item) {
				console.info(item.value);
				this.$i18n.locale = item.value
				// localStorage.setItem("local",item.value)
				// t.$common.localSave('local', );
				uni.setStorageSync('local', item.value);
				this.hideModal();
				this.modalName = ''
			},
			hideModal(e) {
				this.modalName = null
			},
			getData: function() {
				let data = {
					userId: t.userInfo.id
				}
				t.$fetch.request('userInfo/getUserInfo', data).then((res) => {
					console.info(res)
					if (res.code == 200) {
						t.userInfo = res.data
						$common.setUser(res.data);
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			},
			back() {

				let data = {
					username: t.userName,
					password: t.password,
				}

				t.$fetch.request('auth/remove').then((res) => {
					if (res.code == 200) {

					} else {
						// $common.showToast(res.msg);
					}
				}).catch((e) => {})

				$common.delUser();
				$common.toPage(this.$base.pagePath().login.login, 3, 500)


			}
		}

	}
</script>

<style>
	.top {
		height: 200upx;
	}

	.userInfo {
		float: left;
		margin-left: 20px;
		text-align: left;
	}

	.top-img-view {
		text-align: center;
		padding: 20px;
	}

	.user-name {
		padding: 20upx 0;
		color: white;
	}

	.content {
		height: 100%;
	}

	.nav .cu-item {
		padding: inherit;
		height: 120upx;
		line-height: 120upx;
		position: relative;
	}

	.cu-tag.badge {
		top: 6upx;
		right: -6upx;
	}

	.back {
		position: fixed;
		width: 100%;
		bottom: 10px;
	}

	.text-grey {
		color: #E3E8FB;
	}

	.cu-list.menu>.cu-item {
		background-color: #121E2E;
	}

	.bg-cyan {
		background-color: #121e2e;
		color: #E3E8FB;
	}
</style>
